<template>
  <van-tabbar v-model="active" route z-index="100">
    <van-tabbar-item :to="item.url" icon="home-o" v-for="(item,index) in tabbar" :key="index">
    {{ item.lable }}
      <template #icon="props">
        <img :src="props.active ? item.iconActive : item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data () {
    return {
      active: 0,
      tabbar:[{
        icon: require("./icon/icon-home-inactive@2x.png"),
        iconActive: require("./icon/icon-home-active@2x.png"),
        url: "/home",
        lable: this.$t('nav.home')
      },
      {
        icon: require("./icon/icon-strategy-inactive@2x.png"),
        iconActive: require("./icon/icon-strategy-active@2x.png"),
        url: "/market",
        lable: this.$t('nav.exchange')
      },
      {
        icon: require("./icon/icon-wallet-inactive@2x.png"),
        iconActive: require("./icon/icon-wallet-active@2x.png"),
        url: "/ticker/position",
        lable: this.$t('nav.position')
      },
      {
        icon: require("./icon/icon-trend-inactive@2x.png"),
        iconActive: require("./icon/icon-trend-active@2x.png"),
        url: "/ticker",
        lable: this.$t('nav.ticker')
      },
      {
        icon: require("./icon/icon-my-inactive@2x.png"),
        iconActive: require("./icon/icon-my-active@2x.png"),
        url: "/user",
        lable: this.$t('nav.user')
      }]
    }
  }
}
</script>

<style lang="less" scoped>
.van-tabbar{
  height: 56px;
  background: #F8F8F8;
  /deep/.van-tabbar-item{
    .van-tabbar-item__icon{
      margin: 0;
      img{
        height: 24px;
      }
    }
    .van-tabbar-item__text{
      margin-top: 2px;
      font-size: 10px;
      font-weight: 400;
      color: #454F5F;
      line-height: 14px;
    }
    &.van-tabbar-item--active{
      background: transparent;
      .van-tabbar-item__text{
        color: #3871F9;
      }
    }
  }
}
</style>
